<template>
  <div class="tag-demo-wrapper">
    <div class="component-example">
      <label class="example-title">使用示例</label>
      <div class="example">
          <div class="filter-content">
            <div class="filter-item">
              <tag-filter label = '指标' :options="targetOptions" @checked-change="handleTargetCheckedChange"></tag-filter>
            </div>
            <div class="filter-item">
              <tag-filter label = '主体类型' :options="options" @checked-change="handleCheckedChange"></tag-filter>
            </div>
            <div class="filter-item">
              <tag-filter type='datetime' label = '时间' :options="options" @time-change="handleTimeChange"></tag-filter>
            </div>
          </div>
      </div>
    </div>
    <div class="component-document">
      <div class="import-property">
        <label class="prop-title">输入属性</label>
        <ul class="prop-lists">
          <li class="prop-item" v-for="(item,index) in tabProps" :key="index">
            <label class="prop-name">{{ item.name }}：</label>
            <span class="prop-desc">{{ item.desc }}</span>
          </li>
        </ul>
      </div>
      <div class="output-method">
        <label class="prop-title">输出方法</label>
        <ul class="prop-lists">
          <li class="prop-item" v-for="(item,index) in tabMethods" :key="index">
            <label class="prop-name">{{ item.name }}：</label>
            <span class="prop-desc">{{ item.desc }}</span>
          </li>
        </ul>
      </div>
    </div>
  </div>
</template>
<script>
// import TagFilter from '@/components/el-extend-components/TagFilter/TagFilter'

export default {
  name: 'TagFilterDemo',
  components:{
    // TagFilter
  },
  data() {
    return {
        targetOptions:{
          'first':[
              {
                  value:1,
                  label:'1+0'
              },
              {
                  value:2,
                  label:'1+1'
              }
          ],
          'second':[
              {
                  value:3,
                  label:'新设户数'
              },
              {
                  value:4,
                  label:'累计户数'
              }
          ]
        },
        options:{
          'first':[
              {
                  value:1,
                  label:'企业'
              },
              {
                  value:2,
                  label:'个体'
              },
              {
                  value:3,
                  label:'农专'
              },
              {
                  value:4,
                  label:'企业1'
              },
              {
                  value:5,
                  label:'企业2'
              },
              {
                  value:6,
                  label:'企业3'
              },
              {
                  value:7,
                  label:'企业4'
              },
              {
                  value:8,
                  label:'企业5'
              },
              {
                  value:9,
                  label:'企业6'
              },
              {
                  value:10,
                  label:'企业7'
              },
              {
                  value:11,
                  label:'企业8'
              },
              {
                  value:12,
                  label:'企业9'
              }
          ],
        },
        tabProps:[
            {
                name:'label',
                desc:'类型名称'
            },
            {
                name:'options',
                desc:'默认值：{}。元素格式为{XXX:[{value:XXX,label:XXX}]}'
            }
        ],
        tabMethods:[
            {
                name:'checked-change',
                desc:'参数：value。改变标签选中状态时触发。'
            }
        ]
    }
  },
  computed: {
    
  },
  mounted() {
    
  },
  methods: {
   handleTargetCheckedChange(value){
       console.log(value);
   },
   handleCheckedChange(value){
       console.log(value);
   },
   handleTimeChange(value){
     console.log(value);
   }
  },
}
</script>
<style rel="stylesheet/scss" lang="scss" scoped>
.tag-demo-wrapper {
  width: 100%;
  height: 100%;
  .filter-content{
    padding: 10px;
    background: #fff;
    border: 1px solid lightgray;
    .filter-item:nth-child(1){
      border: none;
    }
    .filter-item{
      border-top: 1px dotted lightgray;
    }
  }
}

</style>
